<template>
  <div class="recommend-item">
    <div class="recommend-item_li" :style="`width: calc(${(100/6)}% + 1px);`" v-for="(item,index) in widget" v-show="$api.role(item.link.url)" :key="index" @click="$router.push(item.link.url)">
      <div class="atter-li_img" :style="`border: 1px solid ${item.bgColor};`">
        <i :class="`icon iconfont ${item.icon.name}`" :style="`color: ${item.bgColor};`"></i>
      </div>
      <div class="atter-box">
        <p class="atter-li_p1">{{item.link.name}}</p>
        <p class="atter-li_p2">{{item.prompt}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    props: {
      widget: {}
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .recommend-item {
    display: flex;
    flex-wrap: wrap;
    padding-left: 1px;
    .recommend-item_li {
      display: flex;
      border: 1px solid #e6e9ee;
      padding: 30px 20px;
      margin: 0 0 -1px -1px;
      cursor: pointer;
      .atter-li_img {
        width: 72px;
        height: 72px;
        border-radius: 72px;
        border: 1px solid #aebbcc;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          width: 100%;
          height: 100%;
          text-align: center;
          line-height: 72px;
          font-size: 40px;
          color: #8b9db6;
        }
      }

      .atter-box {
        flex: 1;
        min-width: 0;
        margin-left: 24px;

        .atter-li_p1 {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 18px;
          color: #41526a;
          line-height: 2;
        }

        .atter-li_p2 {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 4px;
          font-size: 14px;
          color: #8b9db6;
          line-height: 2;
        }
      }

      &:hover .atter-li_img {
        border: 1px solid #242d4e !important;

        i {
          color: #41526a !important;
        }
      }
    }
  }
</style>
